<template>
  <div>
    <header>
      <span class="back" @click="back()">
        <i class="el-icon-back"></i>返回
      </span>
      <i>|</i>
      <span> 详情页面 </span>
    </header>
    <div class="cla_introduces">
      <h1 class="cla_name">{{ row.className }}</h1>
      <div>
        <span>讲师：{{ row.teacherName }}</span>
        <span>班主任：{{ row.headmasterName }}</span>
        <span>班级类型：{{ row.classTypeName }}</span>
        <span>开班日期：{{ row.startTime }}</span>
        <span>结课日期：{{ row.finishTime }}</span>
        <!-- <span>是否结课：{{ row.finish == "0" ? "否" : "是" }}</span> -->
        <span
          >是否结课：
          <el-tag
            :type="row.finish == '0' ? 'danger' : 'primary'"
            style="width: 40px"
            >{{ row.finish == "0" ? "否" : "是" }}</el-tag
          >
        </span>
      </div>
      <div class="edit"><i class="el-icon-edit">编辑</i></div>
    </div>
    <hr />
    <div class="content">
      <DatailsSectionInformation
        :putChapterInf="ChapterInf"
        @change="getInf($event)"
      ></DatailsSectionInformation>
      <div class="mod">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="编辑课件" name="first">
            <DatailsEditCourseware :putTreeInf="getTreeInf"></DatailsEditCourseware>
          </el-tab-pane>
          <el-tab-pane label="布置作业" name="second">
            <DatailsAssignHomework></DatailsAssignHomework>
          </el-tab-pane>
          <el-tab-pane label="检查作业" name="third">
            <DatailsCheckWork></DatailsCheckWork>
          </el-tab-pane>
          <el-tab-pane label="评论信息" name="fourth">
            <DatailsReviewInformation></DatailsReviewInformation>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
// 章节信息
import DatailsSectionInformation from "./cla-datails/section-inf.vue";
// 编辑课件
import DatailsEditCourseware from "./cla-datails/edit-courseware.vue";
// 布置作业
import DatailsAssignHomework from "./cla-datails/assign-homework.vue";
// 检查作业
import DatailsCheckWork from "./cla-datails/check-work.vue";
// 评论信息
import DatailsReviewInformation from "./cla-datails/review-information.vue";
import { listChapter } from "@/api/taa/claDetails";

export default {
  components: {
    DatailsSectionInformation,
    DatailsEditCourseware,
    DatailsAssignHomework,
    DatailsCheckWork,
    DatailsReviewInformation,
  },
  data() {
    return {
      activeName: "first",
      row: {},
      ChapterInf: [],
      getTreeInf: {}
    };
  },
  created() {
    this.asd();
  },
  methods: {
    // 返回上一级
    back() {
      this.$router.back();
    },
    asd() {
      this.row = this.$route.query.row;
      // console.log(localStorage.getItem("row"));
      listChapter().then((res) => {
        // console.log(res);
        this.ChapterInf = res.data;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    async getInf(value) {
      // console.log('asdasd', value);
      this.getTreeInf = value
    },
  },
};
</script>
<style>
.back {
  cursor: pointer;
}
.datails-assign-homework {
  width: 200px;
  height: 200px;
  background-color: #2797ff;
}
header span {
  font-size: 16px;
  margin: 10px;
}
.cla_introduces {
  position: relative;
  width: 100%;
  padding: 10px;
}
.cla_introduces div {
  display: flex;
  flex-wrap: wrap;
}
.cla_introduces div span {
  width: 33.33%;
  font-size: 14px;
  margin: 5px 0;
  color: #666;
}
.edit {
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-size: 15px;
  color: #2797ff;
  cursor: pointer;
}
.content {
  position: relative;
}
.mod {
  position: absolute;
  top: 0;
  right: 0;
  width: 76%;
}
</style>